<template>
	<view class="button" @click="handleClick">
		<view v-if="isFellow == false" style="display: flex; padding-left: 18rpx; padding-right: 18rpx;">
			<image src="../../static/addFriend.svg" style="width: 32rpx; height: 32rpx; margin-top: 14rpx;"></image>
			<p style="line-height: 60rpx; margin-left: 5rpx;">关注</p>
		</view>
		<view v-if="isFellow == true">
			<image src="../../static/fellowed.svg"
				style="width: 32rpx; height: 32rpx; margin: 12rpx; padding-left: 10rpx; padding-right: 10rpx;"></image>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	const isFellow = ref(false)

	function handleClick() {
		isFellow.value = !isFellow.value
	}
</script>

<style lang="scss">
	.button {
		background: #3498db;
		height: 60rpx;
		padding: 4rpx 0;
		border-radius: 10px;
		display: flex;

		p {
			text-align: center;
			color: #FFF;
			font-size: 30rpx;
		}
	}
</style>